<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居民详情</title>
    <style>
        body {
            background-color: #f2f7fb;
            position: relative;
        }

        .div1 {
            width: 1150px;
            height: 1000px;
            background-color: white;
            float:left;
            position: relative;
        }

        .jumin {
            font-size: 18px;
            left: 30px;
            top: 30px;
            position: absolute;
        }

        .button {
            width: 70px;
            height: 40px;
            background-color: rgba(40, 208, 148, 0.898039215686275);
            border: none;
            border-radius: 8px;
            right: 30px;
            top: 30px;
            position: absolute;
        }
        
        .div2 {
            width: 1110px;
            height: 48px;
            top: 90px;
            left: 20px;
            background-color: #f2f7fb7f;
            position: absolute;
        }

        .jiankang {
            width: 125px;
            height: 48px;
            background-color: #1877F2;
            color: white;
            float: left;
            position: absolute;
        }

        .jiankang1 {
            top: 13px;
            left: 25px;
            position: absolute;
        }

        .jilu {
            width: 125px;
            height: 48px;
            background-color: #f2f7fb7f;
            left: 125px;
            color: #1877F2;
            left: 125px;
            position: absolute;
        }

        #jil {
            left: 25px;
            top: 13px;
            position: absolute;
        }

        .qinyue {
            width: 125px;
            height: 48px;
            background-color: #f2f7fb7f;
            left: 125px;
            color: #1877F2;
            left: 250px;
            position: absolute;
        }

        #qianyue1 {
            left: 25px;
            top: 13px;
            position: absolute;
        }

        .fuwu {
            width: 125px;
            height: 48px;
            background-color: #f2f7fb7f;
            left: 125px;
            color: #1877F2;
            left: 375px;
            position: absolute;
        }

        #fuwu1 {
            left: 25px;
            top: 13px;
            position: absolute;
        }

        .div3 {
            top: 180px;
            left: 30px;
            font-size: 16px;
            position: absolute;
        }

        .table {
            width: 1150px;
            top: 230px;
            left: 30px;
            position: absolute;
        }

        .td {
            font-size: 13px;
            color: #999999;
            position: absolute;
        }

        .td1 {
            font-size: 13px;
            left: 70px;
            position: absolute;
        }
        .td2{
            left: 298px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .td3{
            left: 340px;
            font-size: 13px;
            position: absolute;
        }
        .td4{
            left: 576px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .td5{
            top: -5px;
            left: 620px;
            position: absolute;
        }
        .td6{
            left: 853px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .td7{
            left: 920px;
            font-size: 13px;
            position: absolute;
        }


        .td8 {
            top: 45px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }

        .td9 {
            font-size: 13px;
            left: 70px;
            top: 45px;
            position: absolute;
        }
        .td10{
            left: 285px;
            top: 45px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .td11{
            left: 340px;
            top: 45px;
            font-size: 13px;
            position: absolute;
        }
        .td12{
            left: 555px;
            top: 45px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .td13{
            top: 45px;
            left: 620px;
            font-size: 13px;
            position: absolute;
        }
        .td14{
            top: 45px;
            left: 853px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .td15{
            top: 45px;
            left: 920px;
            font-size: 13px;
            position: absolute;
        }



        .td16 {
            top: 110px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }

        .td17 {
            font-size: 13px;
            left: 70px;
            top: 110px;
            position: absolute;
        }
        .td18{
            left: 298px;
            top: 110px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .td19{
            left: 340px;
            top: 110px;
            font-size: 13px;
            position: absolute;
        }
        .td20{
            left: 555px;
            top: 110px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .td21{
            top: 110px;
            left: 620px;
            font-size: 13px;
            position: absolute;
        }
        .td22{
            top: 110px;
            left: 879px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .td23{
            top: 110px;
            left: 920px;
            font-size: 13px;
            position: absolute;
        }

        .gaoxue{
            width: 60px;
            height: 32px;
            top: -5px;
            background-color: #FA746B;
            border: none;
            border-radius: 8px;
            position: absolute;
        }
        .guanxin{
            width: 60px;
            height: 32px;
            top: -5px;
            left: 70px;
            background-color:#3DD4A7;;
            border: none;
            border-radius: 8px;
            position: absolute;
        }





        .td24 {
            top: 176px;
            left: 28px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }

        .td25 {
            font-size: 13px;
            left: 70px;
            top: 176px;
            position: absolute;
        }
        .td26{
            left: 274px;
            top: 176px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .td27{
            left: 340px;
            top: 176px;
            font-size: 13px;
            position: absolute;
        }
        .td28{
            left: 555px;
            top: 176px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .td29{
            top: 176px;
            left: 620px;
            font-size: 13px;
            position: absolute;
        }
        .td30{
            top: 176px;
            left: 879px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .td31{
            top: 176px;
            left: 920px;
            font-size: 13px;
            position: absolute;
        }



        .ta {
            top: 218px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }

        .ta1 {
            font-size: 13px;
            left: 70px;
            top: 218px;
            position: absolute;
        }
        .ta2{
            left: 264px;
            top: 218px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .ta3{
            left: 340px;
            top: 218px;
            font-size: 13px;
            position: absolute;
        }
        .ta4{
            left: 540px;
            top: 218px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .ta5{
            top: 218px;
            left: 620px;
            font-size: 13px;
            position: absolute;
        }
        .ta6{
            top: 218px;
            left: 855px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .ta7{
            top: 218px;
            left: 920px;
            font-size: 13px;
            position: absolute;
        }


        .ta8{
            top: 258px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }

        .ta9 {
            font-size: 13px;
            left: 70px;
            top: 258px;
            position: absolute;
        }
        .ta10{
            left: 250px;
            top: 258px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .ta11{
            left: 340px;
            top: 258px;
            font-size: 13px;
            position: absolute;
        }
        .ta12{
            left: 580px;
            top: 258px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .ta13{
            top: 258px;
            left: 620px;
            font-size: 13px;
            position: absolute;
        }
        .div6{
            width: 1110px;
			height: 1px;
			background-color: rgba(242, 247, 251, 1);
            left: 20px;
            top: 530px;
			position: absolute;
        }
        .xinxi{
            left: 30px;
            top: 550px;
            font-size: 18px;
            position: absolute;
        }



        .tb {
            font-size: 13px;
            left: 55px;
            top: 600px;
            color: #999999;
            position: absolute;
        }
        .tb1{
            left: 100px;
            top: 600px;
            font-size: 13px;
            position: absolute;
        }
        .tb2{
            left: 330px;
            top: 600px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .tb3{
            left: 370px;
            top: 600px;
            font-size: 13px;
            position: absolute;
        }
        .tb4{
            top: 600px;
            left: 610px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .tb5{
            top: 600px;
            left: 650px;
            font-size: 13px;
            position: absolute;
        }
        .tb6{
            top: 600px;
            left: 890px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .tb7{
            top: 600px;
            left: 950px;
            font-size: 13px;
            position: absolute;
        }


        .tb8 {
            font-size: 13px;
            left: 43px;
            top: 645px;
            color: #999999;
            position: absolute;
        }
        .tb9{
            left: 100px;
            top: 645px;
            font-size: 13px;
            position: absolute;
        }
        .tb10{
            left: 320px;
            top: 645px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .tb11{
            left: 370px;
            top: 645px;
            font-size: 13px;
            position: absolute;
        }
        .tb12{
            top: 645px;;
            left: 600px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .tb13{
            top: 645px;
            left: 650px;
            font-size: 13px;
            position: absolute;
        }
        .tb14{
            top: 645px;
            left: 890px;
            font-size: 13px;
            color: #999999;
            position: absolute;
        }
        .tb15{
            top: 645px;
            left: 950px;
            font-size: 13px;
            position: absolute;
        }
        .div8{
            width: 1110px;
			height: 1px;
			background-color: rgba(242, 247, 251, 1);
            left: 20px;
            top: 700px;
			position: absolute;
        }
        .jiating{
            top: 730px;
            left: 30px;
            font-size: 18px;
            position: absolute;
        }

        .div9{
            width: 200px;
            height: 84px;
            left: 30px;
            top: 770px;
            box-shadow: darkgrey 1px 1px 1px 1px;
            border-radius: 8px;
            cursor: pointer;
            position: absolute;

        }
        .div9:hover:hover {
            background: rgb(242 242 242);
        }
        .img{
            top: 20px;
            left: 20px;
            position: absolute;
        }
        .liq{
            left: 80px;
            top: 20px;
            font-size: 16px;
            position: absolute;
        }
        .sui{
            left: 120px;
            top: 23px;
            font-size: 12px;
            color: #999999;
            position: absolute;
        }
        .imh{
            left: 165px;
            top: 23px;
            position: absolute;
        }
        .guanxi{
            left: 80px;
            top: 50px;
            font-size: 12px;
            color: #999999;
            position: absolute;
        }
        .div10{
            width: 200px;
            height: 84px;
            left: 250px;
            top: 770px;
            box-shadow: darkgrey 1px 1px 1px 1px;
            border-radius: 8px;
            cursor: pointer;
            position: absolute;

        }
        .div10:hover:hover {
            background: rgb(242 242 242);
        }
        .bianji{
            width: 150px;
            height: 45px;
            top: 900px;
            left: 30px;
            background-color: #1877F2;
            border: none;
            color: white;
            cursor: pointer;
            border-radius: 9px;
            position: absolute;
            
        }
        .bianji:hover:hover {
            background: rgb(7, 172, 237);
        }
        .fanhui{
            width: 64px;
            height: 40px;
            top: 900px;
            left: 200px;
            background-color: white;
            box-shadow: darkgrey 1px 1px 1px 1px;
            border: 1px solid #f1e8e8;
            border: 5px ;
            border-radius: 9px;
            position: absolute;
        }
        .fanhui:hover{
            color: #1877F2;
            border:1px solid #1877F2; 
        }
    </style>
</head>

<body>
    <div class="div1">
        <div>
            <span class="jumin">居民详情</span>
            <span class="faxiaoxi"><button class="button">发消息</button></span>
        </div>
        <div class="div2">
            <div class="jiankang">
                <span class="jiankang1">健康档案</span>
                <span class="jilu"><span id="jil">健康记录</span></span>
                <span class="qinyue"><span id="qianyue1">签约信息</span></span>
                <span class="fuwu"><span id="fuwu1">服务记录</span></span>
            </div>
        </div>


        <div class="div3">居民信息</div>
        <div class="div4">
            <form>
                <table class="table">
                    <tr>
                        <td class="td">居民编号</td>
                        <td class="td1">20200908900</td>
                        <td class="td2">姓名</td>
                        <td class="td3">王安然</td>
                        <td class="td4">头像</td>
                        <td class="td5"><img src="../img/头像.png" alt="" width="32px" height="32px" ></td>
                        <td class="td6">身份证号</td>
                        <td class="td7">371456198908090543</td>
                    </tr>
                    <tr>
                        <td class="td8">手机号码</td>
                        <td class="td9">218864308600</td>
                        <td class="td10">现居地</td>
                        <td class="td11">怀柔区洛西县建设路青莲 <br>小区6-601</td>
                        <td class="td12">登陆密码</td>
                        <td class="td13">ha138900</td>
                        <td class="td14">行政区划</td>
                        <td class="td15">青莲居委会</td>
                    </tr>
                    <tr>
                        <td class="td16">居民表签</td>
                        <td class="td17">
                            <button class="gaoxue">高血压</button>
                            <button class="guanxin">冠心病</button>
                        </td>
                        <td class="td18">性别</td>
                        <td class="td19">女</td>
                        <td class="td20">出生日期</td>
                        <td class="td21">1970-09-08</td>
                        <td class="td22">籍贯</td>
                        <td class="td23">北京</td>
                    </tr>




                    <tr>
                        <td class="td24">民族</td>
                        <td class="td25">汉族</td>
                        <td class="td26">文化程度</td>
                        <td class="td27">本科</td>
                        <td class="td28">婚姻状况</td>
                        <td class="td29">已婚</td>
                        <td class="td30">职业</td>
                        <td class="td31">公务员</td>
                    </tr>


                    <tr>
                        <td class="ta">工作单位</td>
                        <td class="ta1">无</td>
                        <td class="ta2">紧急联系人</td>
                        <td class="ta3">无</td>
                        <td class="ta4">联系人电话</td>
                        <td class="ta5">无</td>
                        <td class="ta6">户籍类型</td>
                        <td class="ta7">城镇</td>
                    </tr>


                    <tr>
                        <td class="ta8">费用类型</td>
                        <td class="ta9">自费</td>
                        <td class="ta10">定点医疗单位</td>
                        <td class="ta11">怀柔区第一人民医院</td>
                        <td class="ta12">来源</td>
                        <td class="ta13">用户注册</td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="div6"></div>
        <div class="div7">
            <span class="xinxi">健康信息</span>
            <form>
                <table>
                    <tr>
                        <td class="tb">身高</td>
                        <td class="tb1">169cm</td>
                        <td class="tb2">体重</td>
                        <td class="tb3">49kg</td>
                        <td class="tb4">血型</td>
                        <td class="tb5">A型</td>
                        <td class="tb6">RH阴性</td>
                        <td class="tb7">否</td>
                    </tr>


                    <tr>
                        <td class="tb8">过敏史</td>
                        <td class="tb9">无</td>
                        <td class="tb10">既往史</td>
                        <td class="tb11">无</td>
                        <td class="tb12">就诊史</td>
                        <td class="tb13">无</td>
                        <td class="tb14">家族病史</td>
                        <td class="tb15">无</td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="div8"></div>
        <div>
            <p><span class="jiating">家庭成员</span></p>
            <div class="div9">
                <img class="img" src="../img/女.jpg" alt="" width="40px" height="40px"><span class="liq">李清</span><span class="sui">58岁</span>
                <img class="imh" src="./img/人人图绿标.png" alt=""><span class="guanxi">关系: 父母</span>
            </div>
            <div class="div10">
                <img class="img" src="../img/人人图.png" alt="" width="40px" height="40px"><span class="liq">王林</span><span class="sui">28岁</span>
                <img class="imh" src="../img/人人图绿标.png" alt=""><span class="guanxi">关系: 夫妻</span>
            </div>
        </div>
        <button class="bianji">编辑档案信息</button>
        <button class="fanhui">返回</button>
    </div>
</body>

</html>